<template>
  <div class="commodity">
    <Divider dashed class="commodity-title">热卖推荐</Divider>
    <Spin class="loading" v-if="!list.length"></Spin>
    <ul class="commodity-list" v-else>
      <li v-for="(item,index) in list" :key="index" class="commodity-item">
        <router-link
          class="commodity-link"
          :to="{name: 'Product',params:{id:item.baseinfo.itemId}}"
          
        >
          <p class="commodity-pic">
            <img :src="item.baseinfo.picUrlNew" class="commodity-img" />
          </p>
          <p class="commodity-name">{{item.name.shortName}}</p>
          <p class="commodity-origPrice">{{item.price.origPrice}}</p>
          <p class="commodity-info">
            <span class="commodity-price">
              ￥
              <strong class="commodity-price-num">{{item.price.actPrice}}</strong>
            </span>
            <span class="commodity-count">{{item.remind.soldCount}}件已售</span>
          </p>
        </router-link>
      </li>
    </ul>
  </div>
</template>
<script>
import { getCommodity } from "../../assets/api/commodity";
export default {
  name: "HomeCommondity",
  data() {
    return {
      list: [],
      page: 1,
      totalpage: 1
    };
  },
  methods: {
    getData() {
      if (this.page > this.totalpage) {
        return;
      }
      getCommodity(this.page).then(data => {
        if (data) {
          // console.log(data)
          this.page++;
          this.totalpage = data.totalpage;
          this.list = this.list.concat(data.itemList);
        }
      });
    }
  },
  created() {
    this.getData();
  }
};
</script>
<style lang="scss" scoped>
@import "../../assets/sass/_mixins.scss";
.commodity {
  position: relative;
  &-list {
    @include flex-between();
    flex-wrap: wrap;
  }
  &-item {
    width: 49%;
    background-color: #fff;
    box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.12);
    margin-bottom: 8px;
  }
  &-link {
    display: block;
  }
  &-pic {
    position: relative;
    width: 100%;
    padding-top: 100%;
  }
  &-img {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
  }
  &-name {
    height: 36px;
    padding: 0 5px;
    margin-bottom: 8px;
    line-height: 1.5;
    @include multiline-ellipsis();
  }
  &-origPrice {
    padding: 0 5px;
    margin-bottom: 8px;
    color: #ccc;
    text-decoration: line-through;
  }
  &-info {
    @include flex-between();
    padding: 0 5px;
    margin-bottom: 8px;
  }
  &-price {
    color: #e61414;
  }
  &-price-num {
    font-size: 20px;
  }
  &-count {
    color: #999;
  }
}
.loading {
 position: absolute;
 left: 50%;
 top: 120px;
 transform: translate(-50%,-50%)
}
</style>